{% extends "base/base.html" %}
{% load static %}

{% block title %}表单{% endblock %}

{% block css %}
    <style>
    .row{
        margin-top: 160px;
    }

    html body{
            background-image: url("{% url 'main:home' %}static/img/background1.jpg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-attachment: fixed;

        }
    </style>

{% endblock %}

{% block js %}
    <script>
        $('.captcha').click(function () {
            $.getJSON("/captcha/refresh/", function (result) {
                $('.captcha').attr('src', result['image_url']);
                $('#id_captcha_0').val(result['key'])
            });
        });
    </script>
{% endblock %}

{% block main %}

    <div class="row">

      <div class="col-md-6 col-md-offset-3">
            <h1 style="text-align: center">注册</h1>
            <form action="" method="post">
                {% csrf_token %}
                <div class="form-group">
                    {{ form.username.label_tag }}
                    {{ form.username }}
                    {% if form.username.errors %}
                        {% for error in form.username.errors %}
                            <div class="alert alert-danger" role="alert">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    {{ form.password.label_tag }}
                    {{ form.password }}
                    {% if form.password.errors %}
                        {% for error in form.password.errors %}
                            <div class="alert alert-danger" role="alert">{{ error }}</div>
                        {% endfor %}
                    {% endif %}

                    {{ form.password2.label_tag }}
                    {{ form.password2 }}
                    {% if form.password2.errors %}
                        {% for error in form.password2.errors %}
                            <div class="alert alert-danger" role="alert">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                    {{ form.captcha.label_tag }}
                    {{ form.captcha }}
                    {% if form.captcha.errors %}
                        {% for error in form.captcha.errors %}
                            <div class="alert alert-danger" role="alert">{{ error }}</div>
                        {% endfor %}
                    {% endif %}
                </div>

                <div class="col-md-4 col-md-offset-4">
                    <button type="submit" class="btn btn-danger">注册</button>
                    <a class="btn btn-default" href="{% url 'user:login' %}" role="button">去登录</a>
                </div>

            </form>

        {% endblock %}
      </div>
    </div>


